<template>
	<view>
		<div class="jiexi">
			<jy-quick-btns></jy-quick-btns>
			<view class="subject">
				<text style="border-bottom: 6upx solid #00aa00;">{{ subject }}</text>

			</view>

			<view class="container">
				<div class="questionItem" v-for='(item,index) in analysis' :key='index'>
					<div class="title"> <text class="type" v-if='item.type_id == 0'>(单选)</text>
						<text class="type" v-else-if="item.type_id == 1">(多选)</text>
						<text class="type" v-else>(判断)</text>
						<!-- 标题 -->
						<text class="tt"> <text style="font-weight: 700; margin-right: 10upx;">{{ index + 1 }}. </text>
							{{ item.title }}</text>
					</div>

					<div class="option">
						<!-- 单选 -->
						<radio-group class="exam-radio" @change="" v-if="item.type_id == 0">
							<view class="item" v-for="(item1,index) in item.options" :key='index' v-if="item1!=''">

								<label>
									<radio :value="item1[index]" :checked="item1.checked=='true'?true:false"
										:disabled="index==item.answer?true:true"
										:color="item.result=='F'?'red':'green'" />

									<text>{{ options[index]}}、{{item1.answer}}</text>
								</label>
							</view>
						</radio-group>

						<!-- 多选 -->
						<checkbox-group v-else-if="item.type_id == 1">
							<view class="item" v-for="(item1,index1) in item.options" :key='index1'>
								<checkbox :value="item1[index1]" :checked="item1.checked=='true'?true:false"
									:color="item.result=='F'?'red':'green'" disabled />
								<text>{{ options[index1]}}、{{item1.answer}}</text>
							</view>
						</checkbox-group>

						<!-- 判断 -->
						<radio-group class="exam-radio" @change="(e) " v-else>
							<label v-for="(item2,index) in judgeList" :key='index' class="judge">
								<radio :value="item2.op" :checked="index==item.answer?true:false"
									:disabled="index==item.answer?true:true" :color="item.result=='F'?'red':'green'" />
								<text>{{ item2.op }}、{{item2.text}}</text>
							</label>
						</radio-group>
					</div>
					<div class="analysis">
						<view class="right">
							<view>正确答案: 
								<view class="correct" style="color: #00aa00; font-weight: 500;">
									<label v-for="(item2,index) in item.true_answer" :key='index'>
										<text>{{ options[item2] }}</text>
									</label>
								</view>
							</view>
							<view v-if="!biji">你的答案:
								<view class="correct">
									<label v-for="(item3,index) in item.answer" :key='index'>
										<text>{{ options[item3] }}</text>
									</label>
								</view>
								<text style="color: green;" v-if="item.result == 'T'">（正确）</text>
								<text style="color: red;" v-else>（错误）</text>
							</view>
						</view>

						<view class="details">
							<view class="tt">
								<text>解析：</text>
							</view>
							<view class="con" v-html="item.analysis"></view>
						</view>
						<view class="details" v-if="item.biji !='' && biji">
							<view class="tt">
								<text>笔记：</text>
							</view>
							<view class="con" v-html="item.biji"></view>
						</view>
					</div>

				</div>
				<view class="details">
					<view class="tt">
						<text style="padding: 10rpx;font-weight: 700;">试题描述：</text>
					</view>
					<view class="con" v-html="jj"></view>
				</view>
			</view>

		</div>


	</view>
</template>


<script>
	import {checkUserinfo} from '@/request/checkUserinfo';
	export default {
		data() {
			return {
				options: ['A','B','C','D','E','F','G'],
				analysis: [], //全部解析数组
				grade_id: 0, //考试题id
				uid: '', //用户uid
				subject: '', //考试名字
				judgeList: [{
					op: 'A',
					text: '正确'
				}, {
					op: 'B',
					text: '错误'
				}],
				biji:false,
				checkedAnswer: '',
				checkboxQuest: '' ,//多选题列表
				jj:'',
				score:'',
				pjf:''
			};
		},
		onLoad(e) {
			checkUserinfo()
			let userinfo = uni.getStorageSync('userinfo');
			if(userinfo){
				this.uid = userinfo.uid;
			}
			if(e.id){
				this.grade_id = e.id
				this.getexamDetail()
				
			}

			if(e.type){
				uni.setNavigationBarTitle({
					title:'题目列表'
				})
				this.biji = true;
				this.getTi(e.type)
			}
		},
		onShow() {
			
		},
		methods: {
			questionBankChange(e) {
				this.btnnum = e
			},
			getTi(e){
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL+'index/exam1/getshiti',
					data:{
						type:e,
						uid:this.uid
					},
					method:'POST',
					success:(res) =>{
						console.log(res.data.data)
						if(e == 'biji'){
							this.subject = '我的笔记列表'
						}else if(e == 'shoucang'){
							this.subject = '我的收藏列表'
						}
						this.analysis = res.data.data.questions
						this.getAnswer1()
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
			},
			getexamDetail() {
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL + 'index/exam1/answerDetail',
					data: {
						uid: this.uid,
						grade_id: this.grade_id
					},
					method: 'POST',
					success: (res) => {
						console.log(res.data.data)
						this.score = res.data.data.score
						this.pjf = res.data.data.pjf
						this.subject = res.data.data.name
						this.jj = res.data.data.introduce
						this.analysis = res.data.data.answer_detail
						this.getAnswer()
					},
					fail: (res) => {
						console.log(res.data);
					}
				});
			},

			getAnswer() {
				this.analysis.forEach((val, index) => {
					this.checkedAnswer = val.answer
				})
			},
			getAnswer1() {
				this.analysis.forEach((val, index) => {
					this.checkedAnswer = val.true_answer
				})
			}

		},

	}
</script>

<style lang="less" scoped>
	.green {
		color: green;
	}

	.red {
		color: red;
	}

	.subject {
		height: 90upx;
		line-height: 90upx;
		padding: 0 30upx;
		font-size: 30upx;
	}

	.container {
		box-sizing: border-box;
		padding: 30upx;
		height: 100vh;
		background-color: white;

		.subject {
			// width: 750upx;
			height: 50upx;
			background-color: white;
		}

		.questionItem {
			// background-color: #f7f7f7;
			border-bottom: 1px solid #ccc;

			.title {
				height: 80upx;
				// background-color: red;
				line-height: 80upx;
				font-size: 30upx;

				.type {
					color: #2e9ffd;
					margin-right: 10upx;
				}

				.tt {
					color: #333;
					font-size: 30upx;
				}
			}

			.option {

				// background-color: skyblue;
				.item {
					margin: 20upx 0;
				}

				.judge {
					margin-right: 25upx;
				}
			}

			.analysis {
				margin-top: 40upx;
				.right {
					
					margin: 45upx 0;

					.correct {
						margin: 0 15upx;
						color: #2e9ffd;
					}
				}
				.right >view{
					display: flex;
				}
				.details {
					// height: 500upx;
					background-color: #f1f1f1;
					margin-bottom: 20upx;

					.tt {
						margin: 20upx 0;
						height: 60upx;
						line-height: 60upx;
						background-color: #31a5e9;
						padding-left: 10upx;

						text {
							font-size: 30upx;
							font-weight: 700;
							color: white;
						}
					}

					.con {
						max-width: 100%;
						font-size: 28upx;
						line-height: 50upx;
						word-wrap: break-word;
					}
				}
			}
		}
	}
</style>
